<!--
 * @Author: wangding
 * @Date: 2020-10-28 18:04:09
 * @LastEditTime: 2021-01-13 10:11:57
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\style\index.vue
-->
<template>
    <div class='sysStyle-main-box'>
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('style.firmName')}}</span>
                <el-input v-model="firmName" style="width:160px;" :placeholder="$t('common.info.pl-insert-content')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('style.systemName')}}</span>
                <el-input v-model="systemName" style="width:160px;" :placeholder="$t('common.info.pl-insert-content')"></el-input>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
        </div>
        <div class="button-box">
            <el-button type="primary" icon='el-icon-edit' class="marginR10" @click="()=>{$store.commit('setSysStyleVisible',true)}">{{$t('add')}}</el-button>
            <el-popconfirm
                :confirm-button-text="$t('sure')"
                :cancel-button-text="$t('cancel')"
                :title="$t('promotionManagement.allDelete')"
                @confirm='styleDeleteBatch()'
            >
                <el-button type="danger" slot="reference" icon='el-icon-delete' >{{$t('delete')}}</el-button>
            </el-popconfirm>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column' :select='true'>
            <template #option="{data}">
                <div class="option-box">
                    <el-button size='small' type="primary" icon="el-icon-edit"  @click='editStyle(data)' class="marginR10"></el-button>
                    <el-popconfirm
                            :confirm-button-text="$t('sure')"
                            :cancel-button-text="$t('cancel')"
                            :title="$t('index.delete_item_confirm')"
                        @confirm='styleDeleteBatchSub(data.sid)'
                    >
                        <el-button class="marginR10" type="danger" slot="reference" icon='el-icon-delete' ></el-button>
                    </el-popconfirm>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <add :firmDataList='firmDataList' v-if='sysStyleVisible'></add>
        <edit :firmDataList='firmDataList' :editDataList='editDataList'></edit>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTable'
import add from './add.vue'
import edit from './edit.vue'

export default {
    components: {
        baseTable,
        add,
        edit
    },
    props: {

    },
    data() {
        return {
            editDataList:{},
            firmDataList:[],
            selectDataList:[],
            firmName:'',
            systemName:'',
            size:10,
            current:1,
            total:1,
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('style.firmName'),
                value: 'firmName',
            },
            {
                title: this.$t('style.systemName'),
                value: 'systemName',
                slot: 'systemName',

            },
            {
                title: this.$t('style.domain'),
                value: 'domain',
                slot: 'domain'
            },{
                title: this.$t('style.loginURL'),
                value: 'loginURL',
                slot: 'loginURL'
            },{
                title: this.$t('style.loginStyle'),
                value: 'loginStyle',
                slot: 'loginStyle'
            },{
                title: this.$t('style.indexURL'),
                value: 'indexURL',
                slot: 'indexURL'
            },{
                title: this.$t('style.indexStyle'),
                value: 'indexStyle',
                slot: 'indexStyle'
            },{
                title: this.$t('control'),
                value: 'sid',
                slot: 'option',
                width:"95"
            }]

        };
    },
    computed: {
        sysStyleVisible(){
            return this.$store.state.sysStore.sysStyleVisible
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.styleGetPage()
        this.businessGetFirm()
    },
    methods: {
        editStyle(data){
            this.editDataList = data
            this.$store.commit('setSysStyleVisibleEdit',true)
        },
        async businessGetFirm(){
            let res = await this.API.businessGetFirm()
            this.firmDataList = res
        },
        async styleDeleteBatch(){
            if(this.selectDataList.length == 0){
                this.comm.showMsg(false,this.$t('index.delete_select'))
                return
            }
            let res = await this.API.styleDeleteBatch({
                ids:this.selectDataList.map(item =>{return item.sid})
            })
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.query()
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        async styleDeleteBatchSub(id){
            let res = await this.API.styleDeleteBatch({
                ids:id
            })
            if(res.success){
                this.$message({
                message: this.$t('index.control_success'),
                type: 'success'
                });
                this.query()
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }
        },
        async styleGetPage(){
            this.loading = true
            let res = await this.API.styleGetPage({
                firmName:this.firmName,
                systemName: this.systemName,
                size: this.size,
                current: this.current
            })
            this.loading = false
            this.total = res.total
            this.dataRows = res.rows || []
        },
        query(){
            this.current = 1
            this.styleGetPage()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.styleGetPage()
        },
        handleCurrentChange(val) {
          this.current = val
          this.styleGetPage()
        },
        handleSelectionChange(data){
            this.selectDataList = data
        }
    },
};
</script>

<style  lang="less" scoped>
    .sysStyle-main-box{
        font-size: 14px;
    }
</style>
